<template>
  <PageWrapper contentFullHeight fixedHeight contentClass="main-box">
    <CommonDateSearch ref="searchRef" @search="handleSearch"></CommonDateSearch>
    <a-card :class="['common-card flex', typeList.length > 4 && 'list-more']" title="气化科系统水耗">
      <div class="chart-box" v-for="item in typeList" :key="item.dictCode">
        <Line class="chart" :loading="item.loading" :chartData="item.chartData" :title="item.itemName" />
      </div>
    </a-card>
  </PageWrapper>
</template>
<script setup
  lang="ts">
  import Line from '@/components/Charts/Line/index.vue'
  import { ref, onMounted, reactive } from 'vue'
  import { PageWrapper } from '@/components/Page'
  import CommonDateSearch from '@/components/CommonDateSearch/index.vue'
  import Icon from '@/components/Icon/Icon.vue'
  import { getChartChildListData } from '@/api/common/chart'
  import { getDictListByCode } from '@/api/sys/dict'
  import { CommonTypeList } from '@/api/common/model/chart'

  defineOptions({ name: 'GasWater' })

  const searchRef = ref()
  const searchInfo = reactive({})
  const typeList = ref<CommonTypeList[]>([])
  const dictCode = 'system_water'

  onMounted(async () => {
    await getTypeList()
    searchRef.value.handleSearch()
  })
  const handleSearch = (params) => {
    Object.assign(searchInfo, params)
    getChartData()
  }
  const getTypeList = async () => {
    const res = await getDictListByCode(dictCode)
    typeList.value = res.map((item) => ({
      ...item,
      loading: true,
      chartData: {
        xaxisList: [],
        yaxisList: [],
      },
    }))
  }
  const getChartData = () => {
    typeList.value.forEach((item) => {
      item.loading = true
      const dataType = item.itemName.includes('费用') ? 1 : 0
      getChartChildListData({
        ...searchInfo,
        dictCode,
        itemName: item.itemName,
        dataType
      })
        .then((res) => {
          item.chartData = res
        })
        .finally(() => {
          item.loading = false
        })
    })
  }
</script>
<style scoped
  lang="scss">
  .common-card {
    flex: 1;
    overflow: hidden;

    &.list-more {
      :deep(.ant-card-body) {
        overflow: auto !important;
      }

      .chart-box {
        height: 45% !important;
      }
    }

    :deep(.ant-card-body) {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      padding: 4px;
      overflow: hidden;

      .chart-box {
        flex-shrink: 0;
        width: 50%;
        height: 50%;
        min-height: 240px;
        padding: 4px;
      }
    }
  }
</style>